<template>
	<view class="container">
		<!-- 消息提示 -->
		<u-toast ref="uToast" />

		<view class="title">
			<text style="font-size: 28px;font-weight: bold;">找回密码</text>
			<text style="font-size: 16px;margin-top: 12px;">请重新设置你的密码</text>
		</view>
		<view class="inputBox">
			<u-input class="input" :color="emailFlag?'':'red'" @blur="emailEvent" v-model="email" placeholder="请输入邮箱"
				type="text" border="bottom" clearable></u-input>
			<u-input class="input" @blur="codeEvent" v-model="code" placeholder="请输入验证码" type="text" border="bottom"
				clearable>
				<template #suffix>
					<u-code ref="uCode" @change="codeChange" keep-running change-text="倒计时XS" @start="disabled = true"
						@end="disabled = false"></u-code>
					<u-button type="primary" color="#00f56e" @tap="getCode" :text="tips" size="small"
						:disabled="disabled"></u-button>
				</template>
			</u-input>
			<u-input class="input" :color="passwordFlag?'':'red'" @blur="passwordEvent" v-model="password"
				placeholder="请设置新密码(大于等于6个字符)" :password="isPassword" border="bottom">
				<template #suffix>
					<u-icon @click="iconClick" :name="passwordIcon" size="28"></u-icon>
				</template>
			</u-input>
			<u-input class="input" :color="password1Flag?'':'red'" @blur="password1Event" v-model="password1"
				placeholder="请再重输密码" :password="isPassword1" border="bottom">
				<template #suffix>
					<u-icon @click="iconClick1" :name="passwordIcon1" size="28"></u-icon>
				</template>
			</u-input>
		</view>
		<view class="retrieveButton">
			<u-button @click="retrieve" type="primary" shape="circle" color="#ffce45" size="large"
				text="重置密码"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from '@/config/common.js'
	export default {
		data() {
			return {
				email: '',
				password: '',
				password1: '',
				code: '',
				emailFlag: true,
				passwordFlag: true,
				password1Flag: true,
				codeFlag: false,
				passwordIcon: 'eye-off',
				isPassword: true,
				passwordIcon1: 'eye-off',
				isPassword1: true,
				tips: '',
				disabled: false
			}
		},
		methods: {
			iconClick() {
				if (this.passwordIcon === 'eye-off') {
					this.passwordIcon = 'eye-fill';
					this.isPassword = false;
				} else {
					this.passwordIcon = 'eye-off';
					this.isPassword = true;
				}
			},
			iconClick1() {
				if (this.passwordIcon1 === 'eye-off') {
					this.passwordIcon1 = 'eye-fill';
					this.isPassword1 = false;
				} else {
					this.passwordIcon1 = 'eye-off';
					this.isPassword1 = true;
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				this.emailEvent();
				if (this.emailFlag && this.email.length > 0) {
					if (this.$refs.uCode.canGetCode) {
						// 向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							//获取验证码
							http.post('/code/getCode', {
								email: this.email
							}).then(res => {
								console.log(res)
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							}).catch(err => {
								console.log(err);
							})
						}, 2000);
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}
			},
			emailEvent() {
				//email(支持中文邮箱)
				var re = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
				if (re.test(this.email)) {
					http.get('/user/existEmail/' + this.email, {}).then(res => {
						var data = res.data.data;
						if (data === 1) {
							this.emailFlag = true;
							this.$refs.uToast.show({
								position: 'top',
								message: '该邮箱合法',
								type: 'success',
							})
						} else {
							this.idFlag = false;
							this.$refs.uToast.show({
								position: 'top',
								message: '没有账号绑定该邮箱哟',
								type: 'error',
							})
						}
					}).catch(err => {
						console.log(err)
					})
				} else {
					this.emailFlag = false;
				}
			},
			codeEvent() {
				console.log('code');
			},
			passwordEvent() {
				//密码校验，6到16位（字母，数字，下划线，减号）
				var re = /^[\w-]{6,20}$/;
				if (re.test(this.password)) {
					this.passwordFlag = true;
				} else {
					this.passwordFlag = false;
				}
			},
			password1Event() {
				if (this.password === this.password1) {
					this.password1Flag = true;
				} else {
					this.password1Flag = false;
				}
			},
			retrieve() {
				//检测一遍数据
				this.passwordEvent();
				this.password1Event();
				uni.showLoading({
					title: '数据发送中...'
				})
				if (this.emailFlag && this.passwordFlag && this.password1Flag) {
					//验证验证码是否正确
					if (this.emailFlag && this.email.length > 0) {
						http.post('/code/verifyCode', {
							email: this.email,
							code: this.code
						}).then(res => {
							var data = res.data.data;
							if (data === 1) {
								//重置密码
								http.post('/user/retrieve', {
									id: this.email,
									password: this.password
								}).then(res => {
									uni.hideLoading();
									var data = res.data.data;
									if (data === 1) {
										uni.showToast({
											icon: "success",
											title: '重置成功',
											duration: 2000
										});
										setTimeout(() => {
											//跳转登录页面
											uni.navigateTo({
												url: '/pages/login/login',
											})
										}, 2000);
									} else {
										uni.showToast({
											icon: "error",
											title: '服务器出错',
											duration: 2000
										});
									}
								}).catch(err => {
									console.log(err);
								})
							} else {
								uni.showToast({
									icon: "error",
									title: '验证码错误',
									duration: 2000
								});
							}
						}).catch(err => {
							console.log(err);
						});
					}
				}
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		margin: 0 15px 0 15px;
	}

	.title {
		display: flex;
		flex-direction: column;
		margin-top: 15px;
	}

	.inputBox {
		display: flex;
		flex-direction: column;
		margin-top: 20px;
	}

	.input {
		margin-top: 15px;
	}

	.retrieveButton {
		margin-top: 50px;
	}
</style>